<template>
  <div class="logoPage">

    <pageLoading v-if="page.loading" :size="600"></pageLoading>

    <div class="logo-main" v-if="!page.loading">

      <div class="logo-main-form">

         <pageForm :data="formItem" ref="form"></pageForm>

      </div>

      <bottomBtn @prev="pagePrev" @next="pageNext">
        <button slot="center" class="ivu-btn ivu-btn-diy ivu-btn-large" type="button" @click="skip">
          <span>跳过</span>
        </button>
      </bottomBtn>

      <Modal
        v-model="modal.state"
        title="提示"
        :mask-closable="false"
        :closable="false"
        @on-ok="asyncOK">
        <h2>
          是否确认{{modal.text}}？
        </h2>
      </Modal>

      <Modal
        v-model="modal1.state"
        title="提示"
        :mask-closable="false"
        :closable="false"
        @on-ok="asyncSkip">
        <h2>
          是否确认跳过？
        </h2>
      </Modal>

    </div>

  </div>
</template>

<script>
  import {isSame} from "common/js/utils";
  import {mapMutations, mapState} from 'vuex';
  import {getLogo} from "api/getLogo"
  import bottomBtn from "base/bottomBtn.vue";
  import pageLoading from "base/pageLoading";
  import pageForm from "base/pageform";

  export default {
    props: {},
    data() {
      return {
        page: {
          loading: true,
        },
        formItem: [],
        modal: {
          state: false,
          text:"选择"
        },
        modal1:{
          state:false
        }
      }
    },
    methods: {
      ...mapMutations({
        "setNavIndex": 'SET_NAVINDEX',
        "setLogo": "SET_LOGO"
      }),
      pagePrev() {
        this.setNavIndex(this.navIndex - 1);
      },
      pageNext() {
        !this.$refs.form.vaildForm() ? this.$Notice.info({title: '错误', desc: '表单未通过'}) : this.modal.state = true;
      },
      asyncOK() {
        this.setNavIndex(this.navIndex + 1);
        this.setLogo(this.$refs.form.normalizeForm())
      },
      asyncSkip(){
        this.setNavIndex(this.navIndex + 1);
      },
      skip(){
        this.modal1.state = true
      },
      _getList() {
        this.page.loading = true;
        getLogo({
          id: this.type,
          goods: this.goodsId,
          lining: this.liningId,

        }).then((Rs) => {
          this.page.loading = false;
          this.formItem = Rs.data;
        }).catch((error) => {
          this.setNavIndex(1);
        })
      },
      _jugeData() {
        if (this.measureData === "") {
          this.pagePrev();
        }
      },
    },
    components: {
      bottomBtn,
      pageLoading,
      pageForm
    },
    computed: {
      ...mapState([
        'type',
        'goodsId',
        'navIndex',
        'liningId',
        "stereotype",
        'designData',
        'measureData',
        'measureMore',
      ])
    },
    mounted() {

    },
    updated() {

    },
    created() {
      this._getList();
    },
    activated() {
      this._jugeData();
    },
    deactivated() {

    },
    watch: {
      type() {
        // 不相等获得数据
        this._getList();
      }
    }
  }
</script>

<style lang="less">
  @import "../../common/style/helpers/mixins.less";
  .logoPage {
    .logo-main-form {
      padding: 25px 0;
      .ivu-form-item-label {
        text-align: center;
        font-size: 14px;
      }
      .ivu-form-item-content {
        .clearfix();
      }
    }
  }
</style>
